<template>
  <view class="itemWrap" @click="goOrderInfo">
    <view class="row titleWrap">
      <view style="width: 70%;">
        <up-text type="" color="#000" size="40" :lines="1" :text="`收件人昵称：${item.userName || ''}`"></up-text>
      </view>
      <view >
        <up-text type="" :color="`${item.isComplete}` === '2' ? '#79C435' : '#000'" size="36" :text="titleText"></up-text>
      </view>
    </view>
    <view class="orderDetail">
      <scroll-view :scroll-x="true" :enable-flex="true" :enable-passive="true" class="scrollWrap">
        <view v-for="record in item.goodsModelList" class="productItem">
          <view style="height: 176rpx; width: 176rpx;">
            <u-image height="176" width="176" :src="record.goodsPic" :lazy-load="true" mode="aspectFit"></u-image>
          </view>
          <view style="margin-top: 12rpx; width: 176rpx;">
            <up-text type="" color="#333" size="28" :text="record.goodsName" :lines="1" align="center"></up-text>
          </view>
        </view>
      </scroll-view>
      <view class="priceWrap">
        <view class="price">
          <view class="unit">￥</view>
          <view class="categoryPrice">{{ item.totalPrice }}</view>
        </view>
        <view>
          <up-text type="" color="#333" size="28" :text="`共 ${allNum} 件`"></up-text>
        </view>
      </view>
    </view>
    <view class="bottomWrap row titleWrap">
      <up-text type="" color="#a3a3a3" size="32" :text="`下单：${time}`"></up-text>
    </view>
    <view class="bottomWrap row titleWrap" v-if="`${type}`==='1'">
      <view></view>
      <view @click.stop>
        <u-button @click="show = true" :plain="true" text="退货"></u-button>
      </view>
    </view>
    <u-modal :show="show" :content='`是否退货 ${item.tradeNo} 订单`'
    :showCancelButton="true" confirmColor="#59B235" :asyncClose="true"
    cancelText="取消" confirmText="退货" @confirm="confirm" @cancel="show = false"
    ></u-modal>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import { returnOrder } from '@/services/order';

export default {
  props: {
    item: {
      type: Object,
      default: () => {}, 
    },
    type: {
      type: String,
      default: '1',
    }
  },
  data() {
    return {
      show: false,
    }
  },
  computed: {
    allNum() {
      let allNum = 0;
      this.item.goodsModelList.forEach((record) => {
        allNum += record.num;
      })
      return allNum;
    },
    time() {
      return dayjs(this.item.orderTime).format('YYYY-MM-DD HH:mm:ss');
    },
    titleText() {
      const { isComplete, isPack, isReturn } = this.item;
      if (`${isComplete}` === '2') {
        return '已到达'
      } else if (`${isReturn}` === '2') {
        return '已退货'
      } else if (`${isPack}` === '2') {
        return '已打包'
      } else {
        return '已下单';
      }
    },
  },
  methods: {
    goOrderInfo() {
      uni.navigateTo({
        url: `/pages/orderInfo/index?tradeNo=${this.item.tradeNo}`,
      })
    },
    async confirm() {
      const res = await returnOrder({
        tradeNo: this.item.tradeNo,
      })
      const _that = this;
      if (res.success) {
        uni.$u.toast('退货成功');
        _that.$emit('refreshList');
      } else {
        uni.$u.toast('退货失败')
      }
      this.show = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.itemWrap{
  margin: 30rpx;
  width: calc(100% - 120rpx);
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.titleWrap {
  justify-content: space-between;
  width: 100%;
}

.orderDetail {
  margin-top: 24rpx;
  width: 100%;
  height: 240rpx;
  position: relative;
}

.scrollWrap {
  display: flex;
  flex-direction: row;
  height: 240rpx;
}

.scrollWrap::after {
  content: " ";
  width: 156rpx;
  height: 100%;
}

.productItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 24rpx;
}

.productItem:first-child {
  margin-left: 0;
}

.priceWrap {
  position: absolute;
  right: 0;
  top: 0;
  height: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0 30rpx 0 80rpx;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 40%);
}

.bottomWrap {
  margin-top: 24rpx;
}

.price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  padding-bottom: 10rpx;
}
.unit {
  color: #59B235;
  font-size: 24rpx;
  line-height: 24rpx;
}
.categoryPrice {
  color: #59B235;
  font-size: 36rpx;
  line-height: 42rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 600;
}
</style>